<template>
	<image src="/static/images/editPoint-bg.png" mode="widthFix" class="bg-img"></image>
	<u-gap height="120"></u-gap>
	<view class="u-p-l-20 u-p-r-20 u-rela">
		<view class="box-radius bgw">
			<u-gap height="40"></u-gap>
			<view class="u-text-center u-tips-color">
				当前积分
			</view>
			<view class="u-text-center color-primary u-p-t-16" style="font-size: 48upx;">
				{{userInfo.balance.points}}
			</view>
			<u-gap height="40"></u-gap>
		</view>
	</view>
	<u-gap height="24"></u-gap>
	<u-sticky bg-color="#F9F9F9" h5-nav-height="0">
		<view class="u-p-l-20 u-p-r-20">
			<view class="bgw box-radius">
				<u-tabs active-color="#117B12" :list="tabsList" :is-scroll="false" v-model="tabsCurrent"
					@change="tabsChange" :font-size="28"></u-tabs>
			</view>
		</view>
	</u-sticky>
	<u-gap height="20"></u-gap>
	<view class="u-p-l-20 u-p-r-20" v-for="v in list">
		<view class="bgw box-radius u-p-28 u-font-24">
			<view class="u-flex u-font-28">
				<view class="u-flex-1">
					<!-- 0=后台变更,1=佣金转积分,2=转入,3=转出,4=积分支付 -->
					{{v.pointsStatus == 0 ?'后台变更':v.pointsStatus == 1 ?'佣金转积分':v.pointsStatus == 2 ?'转入':v.pointsStatus == 3 ?'转出':v.pointsStatus == 4 ?'积分支付':'-'}}
				</view>
				<view class="color-green" v-if="v.type == 0">
					+{{v.total}}
				</view>
				<view class="color-red" v-if="v.type == 1">
					-{{v.total}}
				</view>
			</view>
			<!-- <view class="u-p-t-15 u-content-color">
				转账编号：{{v.code}}
			</view> -->
			<!-- <template v-if="v.pointsStatus == 2 || v.pointsStatus == 3">
				<view class="u-p-t-15">
					<template v-if="userInfo.phone != v.phone">
						<text class="u-content-color">收款人：</text>
						<text class="color-primary">{{v.phone}}</text>
					</template>
					<template v-if="userInfo.phone != v.payPhone">
						<text class="u-content-color">转款人：</text>
						<text class="color-primary">{{v.payPhone}}</text>
					</template>
				</view>
			</template> -->
			<template v-if="v.phone">
				<view class="u-p-t-15">
					<text class="u-content-color">转积分人：</text>
					<text class="color-primary">{{v.phone}}</text>
				</view>
			</template>
			<view class="u-p-t-10 u-content-color">
				变动前积分：{{v.beforePoints}}
			</view>
			<view class="u-p-t-10 u-content-color">
				变动后积分：{{v.afterPoints}}
			</view>
			<view class="u-content-color u-p-t-10">
				变动时间：{{v.created}}
			</view>
			<view class="u-content-color u-p-t-10" v-if="v.note">
				备注：{{v.note}}
			</view>
		</view>
		<u-gap height="20"></u-gap>
	</view>
	<g-loadmore :status="loadmoreStatus"></g-loadmore>
	<u-gap height="20"></u-gap>
	<u-gap height="120"></u-gap>
	<view class="fixed-bottom u-p-l-48 u-p-r-48 u-p-t-20 u-p-b-20 bgw">
		<view class="u-flex">
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button @click="navLogin('/pagesSub/editTransfer/editTransfer')" type="primary" shape="circle" class="">转账</u-button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import mixins from '@/common/js/mixins.js';
	import mixinList from '@/common/js/mixinList.js';
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();
	const userInfo = computed(() => store.state.$userInfo)
	const tabsCurrent = ref(0)
	const tabsList = [{
			name: '全部',
			id: ''
		},
		{
			name: '收益',
			id: 0
		},
		{
			name: '支出',
			id: 1
		},
	];
	const tabsChange = (index) => {}
	watch(tabsCurrent, async (val) => {
		await getList(1)
	})
	apiPath.value = 'getPointsMe'
	searchParams.type = computed(() => {
		return tabsList[tabsCurrent.value].id
	});
	const statisticsData = ref({})

	// const bindStatusChange = () => {}
	onReady(() => {

	})
	onLoad((d) => {
		getList(1)
	})
	onShow(() => {
		uni.$off('point_update');
		uni.$once('point_update', (v) => {
			getList(1)
		})

	})
</script>

<style lang="scss" scoped>
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
	}
	.fixed-bottom{
		box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06);
		z-index: 999;
	}
</style>